
// 左右切换动画
.fold-left-effect-enter-active {
	animation-name: fold-left-effect-in;
	animation-duration: .4s;
}

.fold-left-effect-leave-active {
	animation-name: fold-left-effect-out;
	animation-duration: .4s;
}

@keyframes fold-left-effect-in {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		/* visibility: visible; */
	}

	/*50% {
	  transform: translate3d(50%, 0, 0);
	}*/
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fold-left-effect-out {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	/*50% {
	  transform: translate3d(-50%, 0 , 0);
	}*/
	100% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		/* visibility: hidden; */
	}
}

.fold-right-effect-enter-active {
	animation-name: fold-right-effect-in;
	animation-duration: .4s;
}

.fold-right-effect-leave-active {
	animation-name: fold-right-effect-out;
	animation-duration: .4s;
}

@keyframes fold-right-effect-in {
	0% {
		/* width: 100%; */
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		/* visibility: visible; */
	}

	/*50% {
	  transform: translate3d(50%, 0, 0);
	}*/
	100% {
		/* width: 100%; */
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fold-right-effect-out {
	0% {
		/* width: 100%; */
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	/*50% {
	  transform: translate3d(-50%, 0 , 0);
	}*/
	100% {
		/* width: 100%; */
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		/* visibility: hidden; */
	}
}